
<!-- ## 事件处理 
 1. `v-on` 指令来监听 DOM 事件，但是实际可以简写成`@`, 比如：v-on:click="handler" 或 @click="handler" 

 -->



<!-- ### 内联样式（内联事件处理器）-->
<!-- <template>
  <button @click="count++">加 1</button>
  <p>Count 的值是：{{ count }}</p>
</template>  -->
 
  
<!-- <script setup>
import { ref, reactive, computed } from "vue";
const count = ref(0)

</script> -->

<!-- ### 采用方法实现（方法事件处理器） -->

<!-- <template>
  <button @click="handle">点击我</button>
</template> -->

<!-- <script setup>
import { ref, reactive, computed } from "vue";

const name = ref('shen')
// `event`也可也写为`e`，不影响
const handle = (event) =>{
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    console.log(event);
    console.log(event.target); //<button @click="handle">点击我</button>
    console.log(event.target.tagName); // BUTTON
  }
}
</script> -->

<!-- ### 事件处理器中访问事件参数 -->

<template>
  <button @click="handle('我是传递的参数',$event)">点击我</button>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

const name = ref('shen')
// `event`也可也写为`e`，不影响
const handle = (a,event) =>{
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    console.log(a);
    console.log(event);
    console.log(event.target); //<button @click="handle">点击我</button>
    console.log(event.target.tagName); // BUTTON
  }
}
</script>





